import React, { Component } from 'react'
import {Card, Row, Col, Icon, message, Tooltip, Alert} from 'antd'
import { connect } from 'react-redux'
import {loadApps} from '../../action/index'
import {FormattedMessage} from "react-intl";
import {withRouter} from "react-router-dom";

class AppList extends Component {
  componentDidMount() {
    this.props.loadApps()
  }
  updateInfo(){
      window.location.href = '/learn/home/index.html'
  }
  render () {
    const message = <div>
        <FormattedMessage id='您还未完善个人信息，可进入个人中心完善个人信息'/>
        <a onClick={this.updateInfo.bind(this)} className='perfect-information'>
            <FormattedMessage id='去完善'/>
            <Icon type="double-right" theme="outlined" />
        </a>
    </div>
    return (
      <div id="app-list">
          {this.props.user.gender === null
              ? <Alert message={message} type="warning" showIcon />
              : ''}
        <Row type="flex" justify="center">
          <Col span={16}>
            <Row gutter={20} className="app-list-container">
              {
                this.props.apps.map((app, idx) => {
                  const appUrl = '/learn' + app.link;
                  return (
                    <Col xs={{span: 24}} sm={{span: 6}} lg={{span: 6}} key={idx} className="app-item">
                        <Tooltip  title={<FormattedMessage id={app.name} />}>
                            <a href={appUrl}>
                              <Card
                                style={{height: 200}}
                                title={<FormattedMessage id={app.name} />}
                              >
                                <div>
                                  <Icon type={app.icon}/>
                                </div>
                              </Card>
                            </a>
                        </Tooltip>
                    </Col>
                  )
                })
              }
            </Row>
          </Col>
        </Row>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  user: state.user,
  apps: state.apps,
  settings: state.settings
})

const mapDispatchToProps = (dispatch) => {
  return {
    loadApps: ()=> {dispatch(loadApps())}
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AppList))
